WD PLUS 2020-11 (dashboard)

7. Struktury danych - tablice i obiekty (Moduł)

7.3. Wyświetlamy chmurę tagów

Zadanie: Lista autorów

W tym submodule, dla każdego artykułu:

  • wygenerowaliśmy listę tagów w prawej kolumnie,
  • policzyliśmy ile razy występuje każdy z tagów,
  • nadaliśmy linkom klasy w zależności od liczby wystąpień danego tagu.

Oprócz poprawnego wykonania poleceń z tego submodułu Twoim zadaniem jest wykonanie analogicznej funkcjonalności dla autorów artykułów, czyli:

  • wygeneruj listę autorów (w postaci linków) w prawej kolumnie,
  • do każdego linka dodaj liczbę artykułów danego autora.

Wskazówki

  1. Zmodyfikuj funkcję generateAuthors, wzorując się zmianach w funkcji generateTags,
  2. Pamiętaj, że jest tylko jeden autor artykułu, więc funkcja generateAuthors ma o jedną pętlę mniej.
  3. Nie zapomnij dodać nowej stałej ustawień – optAuthorsListSelector.

Dla ambitnych

Teraz kiedy znasz już obiekty, możemy Ci powiedzieć, że bardzo często wykorzystuje się je do przechowywania ustawień – czyli tych wartości wykorzystywanych w skrypcie, które możesz chcieć w przyszłości łatwo zmienić.

Dzięki stosowaniu takich ustawień będzie Ci dużo łatwiej dostosować skrypt, jeśli zdecydujesz się na zmianę struktury HTML albo nazewnictwa klas decydujących o rozmiarach tagów w ich chmurze.

Znajdź fragment kodu, w którym deklarujesz stałe o nazwach zaczynających się od opt. Zacznij od przeniesienia ich na samą górę pliku. Dzięki temu łatwo będzie je znaleźć.

Następnie stwórz stałą o nazwie opt i umieść w niej pusty obiekt. Do tego obiektu przenosić poszczególne stałe ustawień. Np. dla takich stałych:

const optArticleSelector = '.post',
  optTitleSelector = '.post-title',
  optTitleListSelector = '.titles';

obiekt ustawień może wyglądać następująco:

const opts = {
  articleSelector: '.post',
  titleSelector: '.post-title',
  titleListSelector: '.titles'
};

Po tej zmianie wystarczy, że w swoim edytorze kodu znajdziesz opcję "znajdź i zamień" i wykorzystasz ją do zmiany wszystkich fraz optArticleSelector na opt.articleSelector. Podobną operację możesz wykonać dla pozostałych ustawień.

Możesz powiedzieć, że ta zmiana jest kosmetyczna – i faktycznie tak jest. Pomoże nam to jednak usystematyzować nazewnictwo naszych ustawień. Jednak ten krok to dopiero początek.

Nowością, o której wcześniej nie mówiliśmy, jest możliwość umieszczania obiektów w obiektach! To oznacza, że Twoje ustawienia mogą wyglądać np. tak:

const opts = {
  tagSizes: {
    count: 5,
    classPrefix: 'tag-size-',
  },
};

const select = {
  all: {
    articles: '.post',
    linksTo: {
      tags: 'a[href^="#tag-"]',
      authors: 'a[href^="#author-"]',
    },
  },
  article: {
    tags: '.post-tags .list',
    author: '.post-author',
  },
  listOf: {
    titles: '.titles',
    tags: '.tags.list',
    authors: '.authors.list',
  },
};

Zwróć uwagę, że w powyższym przykładzie użyliśmy "za dużo" przecinków. W kodzie JS nie jest to błąd, a coraz częściej spotykana praktyka. Wynika to z faktu, że stawiając przecinek po każdym elemencie, możesz dowolnie zmieniać ich kolejność i zawsze dodać kolejny element. W efekcie nie musisz pilnować czy na pewno przecinki są po każdym elemencie, poza ostatnim.

Dzięki takiemu "drzewu" ustawień łatwiej będzie Ci zapamiętać, że:

  • selektor do wszystkich linków do tagów znajdziesz w select.all.linksTo.tags,
  • selektor listy tagów – w select.listOf.tags,
  • liczbę klas regulujących rozmiary czcionek w chmurze tagów – w opts.tagSizes.count.

Ta zmiana pozwoli Ci lepiej rozumieć swój kod JS, kiedy będziesz czytać go za godzinę, dzień czy miesiąc. A jeśli przyjdzie potrzeba zmiany tych ustawień, również łatwiej będzie Ci się w nich odnaleźć.

Jeśli chcesz, możesz dostosować ustawienia swojego skryptu wedle tych wskazówek. Możesz również stworzyć nowe ustawienia, np. na klasę nadawaną aktywnym artykułom czy linkom.

;